<template>
  <vxe-modal :id="'editForm_'+id" v-model="showDialog" :title="dialogTitle" :before-hide-method="handleClose" width="700" show-footer show-zoom resize remember storage>
    <template #default>
      <el-form ref="form" :rules="rules" size="small" :model="form" label-width="100px">
        <el-row>
          <template v-for="(item, index) in columns">
            <el-col v-if="item.is_update && item.type != 'file'" :key="item.id" :span="Number(item.span)">
              <el-form-item :label="item.cn" :prop="item.en" :label-width="item.form_label_width" style="height:33px">
                <el-input v-if="item.type == 'input'" v-model="form[item.en]" clearable @input="fieldChange(item.on_change)" :placeholder="item.placeholder"/>
                <el-select
                  v-if="item.type == 'select'"
                  v-model="form[item.en]"
                  style="width: 100%;"
                  filterable
                  placeholder="请选择"
                  clearable
                  @change="fieldChange(item.on_change)"
                >
                  <el-option v-for="selectItem in selectDatas[item.en]" :key="selectItem.id" :label="selectItem.label" :value="selectItem.value" />
                </el-select>
                <el-input v-if="item.type == 'selector'" v-model="form[item.en + '_show_value']" :readonly="true" :placeholder="item.placeholder">
                  <template slot="prepend">
                    <el-button style="color:#66B1FF" icon="el-icon-s-grid" @click="selectorShow(item)">{{ form[item.en] }}</el-button>
                  </template>
                  <template slot="append">
                    <el-button style="color:red" icon="el-icon-circle-close" circle @click="clearSelector(item.en)" />
                  </template>
                </el-input>
                <el-input v-if="item.type == 'user'" v-model="form[item.en + '_show_value']" :readonly="true" :placeholder="item.placeholder">
                  <template slot="prepend">
                    <el-button style="color:#66B1FF" icon="el-icon-s-grid" @click="selectUserShow(item)">{{ form[item.en] }}</el-button>
                  </template>
                  <template slot="append">
                    <el-button style="color:red" icon="el-icon-circle-close" circle @click="clearSelector(item.en)" />
                  </template>
                </el-input>
                <el-radio-group v-if="item.type == 'radio'" v-model="form[item.en]" clearable @change="fieldChange(item.on_change)">
                  <el-radio v-for="selectItem in selectDatas[item.en]" :key="selectItem.id" :label="selectItem.value">{{ selectItem.label }}</el-radio>
                </el-radio-group>
                <el-switch v-if="item.type == 'switch'" v-model="form[item.en]" active-color="#13ce66" inactive-color="#ff4949" clearable @change="fieldChange(item.on_change)" />
                <el-date-picker
                  v-if="item.type == 'date'"
                  v-model="form[item.en]"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 100%;"
                  placeholder="选择日期"
                  clearable
                  @change="fieldChange(item.on_change)"
                />
                <el-date-picker
                  v-if="item.type == 'datetime'"
                  v-model="form[item.en]"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%;"
                  placeholder="选择日期"
                  clearable
                  @change="fieldChange(item.on_change)"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
        <slot name="edit_form_append" :form="form" />
      </el-form>
      <selector ref="selectorDialog" @confirm="selectorConfirm" />
    </template>
    <template #footer>
      <el-button type="primary" v-if="editFormConfirm" :loading="confirmStatu" @click="onSubmit('form')">{{ confirmText }}</el-button>
    </template>
  </vxe-modal>
</template>

<script>
import Selector from './selector.vue'
import { edit_ } from '@/api/template/index'

export default {
  components: {
    Selector
  },
  props: {
      editFormConfirm: {
        type: Boolean,
        default: true
      }, // 编辑框是否可以提交
  },
  data() {
    return {
      showDialog: false,
      id: 'id',
      data_object: {},
      columns: null,
      selectDatas: null,
      rules: null,
      form: {},
      dialogTitle: '编辑',
      selectorItem: {},
      confirmStatu: false,
      confirmText: '确  定'
    }
  },
  methods: {
    show(params) {
      this.showDialog = true
      const { id, columns, headrow, selectDatas, rules, form, data_object } = params
      this.id = id
      this.columns = columns
      this.headrow = headrow
      this.selectDatas = selectDatas
      this.rules = rules
      this.form = form
      this.data_object = data_object
      for (var i = 0; i < columns.length; i++) {
        if (columns[i].type === 'input') {
          if (form[columns[i].en] != null) {
            this.form[columns[i].en] = form[columns[i].en] + ''
          }
        }
      }
      this.$nextTick(()=>{
        this.$parent.$emit('editInit',{form:this.form})
      })
    },
    fieldChange(code) {
      eval(code)
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.confirmStatu = true
          this.confirmText = '提交中'
          edit_({
            row: this.form,
            data_object_no: this.data_object.no,
            type: 'dialog',
            interceptorConfirm: this.interceptorConfirm
          })
            .then(res => {
              if (res.type === 'confirm') {
                this.$confirm(res.msg, '提示', {
                  confirmButtonText: res.confirmButton,
                  cancelButtonText: res.cancelButton,
                  type: 'warning'
                }).then(() => {
                  this.interceptorConfirm = true
                  this.onSubmit('form')
                })
              } else {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.close()
                this.$emit('success', res.updateData)
              }
            })
            .finally(e => {
              this.confirmStatu = false
              this.confirmText = '确  定'
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    selectorShow(item) {
      this.$refs.selectorDialog.show(item, 2, this.headrow, this.form)
    },
    selectorConfirm({ item, rows }) {
      const selectRow = rows
      var en = ''
      var en_show_value = ''
      for (var i = 0; i < selectRow.length; i++) {
        en += selectRow[i][JSON.parse(item.type_config).key] + ','
        en_show_value += selectRow[i][JSON.parse(item.type_config).value] + ','
      }
      this.$set(this.form, item.en, en.substring(0, en.length - 1))
      this.$set(this.form, item.en + '_show_value', en_show_value.substring(0, en_show_value.length - 1))
      var columns = this.columns
      for (var j = 0; j < columns.length; j++) {
        if (columns[j].is_fictitious) {
          if (columns[j].fictitious_sql.split('t.')[1] === item.en) {
            this.$set(this.form, columns[j].en, en.substring(0, en.length - 1))
          }
        }
      }
      this.$refs.form.clearValidate()
      this.fieldChange(item.on_change)
    },
    clearSelector(en) {
      this.$delete(this.form, en)
      this.$delete(this.form, en + '_show_value')
    },
    selectUserShow(item) {
      var _this = this
      var config = JSON.parse(item.type_config)
      if (_this.form[item.en] != null) {
        config.select_userids = _this.form[item.en].split(',')
      }
      this.$UserSelector.show(config).then(res => {
        var userids = ''
        var usernames = ''
        for (var i = 0; i < res.length; i++) {
          userids += res[i].userid + ','
          usernames += res[i].username + ','
        }
        this.$set(this.form, item.en, userids.substring(0, userids.length - 1))
        this.$set(this.form, item.en + '_show_value', usernames.substring(0, usernames.length - 1))
      })
    },
    handleClose(done) {
      this.$refs.form.clearValidate()
    },
    close() {
      this.showDialog = false
    }
  }
}
</script>
